Table of Contents: The Ultimate Design Guide 目錄
頁面內容提供概覽並支援使用者直接跳轉到特定部分。設計目錄時，仔細對比不同的佈局和樣式選項，以實現最佳的可用性。目錄自印刷出版以來便用於幫助讀者定位特定章節。在數字時代，目錄被廣泛應用於網站、電子書和其他數字介面，以便於資訊組織和導航。
定義：目錄是一種有序的可點選標題列表，對應頁面中的內容部分，允許使用者直接跳轉到頁面上的任何部分。
使用目錄的主要優勢包括：
- 頁面概覽：幫助使用者快速形成頁面內容的整體理解。
- 直接訪問特定部分：無需滾動即可跳轉到感興趣的部分。
- 提高底部內容的可見性：增加使用者對頁面底部內容的發現可能性。
- 便於分享頁面特定部分：每個部分的URL包含片段識別符號，方便分享特定位置。
瀏覽器位址列：URL 中的分段識別符號允許共享特定位置。
- 提高搜尋引擎結果頁面的可見性：搜尋引擎可檢測目錄中的標題，提高點選率。
谷歌搜尋結果頁面：常規搜尋結果（頂部）僅顯示頁面的元描述。底部搜尋結果顯示根據頁面目錄生成的其他網站連結。
在設計目錄時需考慮：
佈局考量：放置在頁面主體還是側欄，頂部或其他位置，是否設定為粘性
樣式考量：垂直、水平或多列布局
目錄的佈局考量
目錄的位置：側欄 vs 主體
主內容區：最常見的位置，適用於所有螢幕尺寸，在移動端表現最佳。
左側欄：適合兩欄以上佈局的大螢幕，有明確的視覺分離，但移動端不適用。
右側欄：不常見，易被忽視，僅適用於大螢幕的多欄佈局。
Main Body 主體：目錄常見於頁面主體內容中，尤其是當側欄被佔用或在移動裝置上不可用時。這種佈局適用於各種螢幕尺寸，特別適合移動端。
粘性 vs 非粘性目錄
粘性目錄：在使用者滾動頁面時保持可見，適合在側欄放置，能讓使用者隨時掌握位置。
非粘性目錄：適合放在頁面主體中，避免與全域性導航衝突，通常採用垂直堆疊佈局。
頂部 vs 內容體
頁面頂部：最佳選擇，通常位於標題或簡要概述下方。
內容中部：目錄放置在頁面正文內，可能降低發現性，且易與其他連結混淆。
目錄的樣式考量
垂直佈局：最常見，適合較少主題的長標題列表，易於掃描。
水平佈局：節省垂直空間，適合短標題但難於掃描。
多列布局：適合長列表，節省空間且易於掃描。
目錄設計最佳實踐
- 使用明確的標籤：例如“目錄”“本頁內容”。
Robinhood：標題告訴我更多…可能會被誤認為是指向其他頁面的相關連結。
- 保持連結標籤一致：確保目錄連結標籤和目標部分標題匹配，避免認知負擔。
ready.gov：目錄中的連結標籤（例如“提前準備”）與相應的章節標題（例如“事件發生前”）不完全匹配。使用者可能不確定他們是否到達了正確的章節。
- 簡潔易讀的標題：確保標題易於掃描，避免過長。
美國核管理委員會（U.S. NRC）：此常見問題解答頁面的目錄顯示出冗長、難以瀏覽的標題。 
美國核管理委員會（U.S. NRC）：同一網站上的另一個常見問題解答頁面將問題分類，併為每個類別新增一個簡短的標題，使目錄更易於瀏覽。目錄中請勿包含外部連結
- 不包含外部連結：使用者期望目錄中的連結均為頁面內跳轉。
- 不忽略頁面上方內容：確保目錄全面概述頁面內容。
USDA.gov：此頁面跳過了在摺疊上方顯示的部分，僅顯示頁面下方的主題。這種設計可能會給人一種對頁面內容的錯誤感覺。
- 包含返回頂部的連結：幫助使用者在長頁面上輕鬆跳轉。
工資和勞工部門：新增一個返回頂部的連結可減少在長頁面上的滾動操作，並允許使用者在完成一個部分後跳轉到其他部分。
- 保持一致性：目錄樣式應在整個網站中保持一致，減少使用者學習成本。
美國食品藥品監督管理局：該網站上各頁面的目錄樣式和格式各不相同——在幾個相鄰頁面中至少呈現了 4 種不同的樣式。
結論：目錄為頁面提供有用的概覽，並支援內容頁面內的導航。透過仔細權衡不同佈局和樣式選項的利弊，可以建立高可用性和影響力的目錄設計。